html,body{ background:#2f133b;}

.containers{min-width:320px;max-width:568px;margin:0 auto; position:relative;}

/*****导航begin****/
.kfc-b{left:17%;}
.kfc-l{left:33.8%;}
.kfc-a{left:50.7%;}
.kfc-d{left:67.5%;}
.kfc-24h{right:0;}
/*****导航end****/
.gallery{ position:relative; height:auto;}
.change{font-size:0;z-index:5;}
.change,.download-app{width:17.3%;height: 34%; position:absolute;top:0;left:0;z-index:5; overflow:hidden;}
.hnav a{position:absolute;top:0;width:16.4%;height:8%;z-index:5; text-indent:-9999px;}
.hnav .change > a{display:inline-block;width:100%;height:100%; text-indent:0; position:relative;top:0;left:0;}
.download-app{z-index:4;}
#bookmark{width:222px;height:82px; background:url(../images/bookmark.png) no-repeat; background-size:contain; position:fixed; bottom:0;left:50%;margin-left:-104px;}

.clogo{width:100%;}
figure img{width:100%;}

.moon,.unlike,.dinner-tit{ position:absolute;}
.moon,.unlike{top:33.5%;z-index:0;}
.moon{left:5px;-webkit-animation:animate1 2s linear infinite;-webkit-transform-origin:50% top;}
.unlike{left:63px;}
.dinner-tit{left: 38%;top: 21%;z-index:0;}
.unlike img:first-child{position:absolute;z-index:1;-webkit-animation:animate2 2s linear infinite;margin-top:-3px;}
.unlike img:nth-child(2){ position:absolute;top:0;left:36px;z-index:0;}
.unlike img:nth-child(3){ position:absolute;top:26px;left:0;-webkit-animation:animate3 2s ease infinite;z-index:2;}
.unlike img:last-child{ position:absolute;top:32px;left:0;z-index:3;}

.dinner-tit img:nth-child(2){ position:absolute;top:12px;left:7px;-webkit-animation:animate4 2s linear infinite;}
.dinner-tit img:last-child{ position:absolute;top:32px;left:19px;z-index:1;}

@-webkit-keyframes animate1{
    33%{-webkit-transform:rotate(-3deg);}
    66%{-webkit-transform:rotate(3deg);}
}

@-webkit-keyframes animate2{
    50%{-webkit-transform:translate(0,3px);}
}

@-webkit-keyframes animate3{
    50%{-webkit-transform:translate(3px,0);}
}

@-webkit-keyframes animate4{
    50%{opacity:0.8;}
}

.line{width:100%;height:1px;margin-top:10px;background:-webkit-gradient(linear,0 50%,100% 50%,color-stop(0%,#9a562d),color-stop(50%,#feefb3),color-stop(100%,#9a562d));}
.step h3,.more h3{width:100%;font-size:0;}
.step img,#wrapp img,.more h3 img{width:100%;}
.s-pro li{font-size:0;float:left;width:31.3%;margin:0 1%; position:relative;}
.step1{padding:0 2.8%;}
.s-pro li.active .li-active{display:block; -webkit-animation:showbg .3s ease-in;}
.li-active{ position:absolute;z-index:1;width:100%;height:100%; background:url(../images/pro_active.png) no-repeat; background-size:cover;top:0;left:0; display:none;}

@-webkit-keyframes showbg{
	0%{opacity:0;}
	100%{opacity:1;}
}

.step2{margin:10px 0; position:relative;}
.step2 > a{ position:absolute;z-index:1;text-indent:-9999px;}
.dating{width:60.7%;height:55%; top:39%;left:20%;}
.prev,.next{width:13%;height:81%;bottom:0;}
.prev{left:0;}
.next{right:0;}
#wrapp{width:100%;overflow:hidden; position:relative;}
#wrapp ul{width:600%;}
#wrapp ul li{float:left;width:16.6666666666666667%;font-size:0;}
.more{ background:-webkit-gradient(linear,0 0,0 100%,from(#3e204b),to(#5c356c));}
.more figure{padding:0 10px 10px;}
.intro{padding:0 8px 10px; background:-webkit-gradient(linear,0 0,0 100%,from(#5c356c),to(#462753)); position:relative;}
.intro-text{ position:absolute;top:5%;left:8%;}
.intro-text li{font-size:8px;-webkit-text-size-adjust:none; list-style:inside;color:#f6e9da;}
.intro-text li span{margin-left:8px;}
.stress,.stress em{font-weight:bold;}
.stress em{font-size:10px;}
/****心动画****/
.heart1,.heart2{ position:absolute;}
.heart1{width:8px;height:8px; background:url(../images/heart1.png) no-repeat; background-size:contain;bottom:32%;right:2%;-webkit-animation:shake 1.5s ease-in-out infinite;}
.heart2{width:6px;height:6px; background:url(../images/heart2.png) no-repeat; background-size:contain;bottom:26%;right:6%;-webkit-animation:shake 1s ease-in-out infinite;}

@-webkit-keyframes shake{
	50%{-webkit-transform:scale(1.2); background-size:contain;}
}
